<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { getAiDutyStatusRecordsPage } from '#/api/moxi/comprehensiveStaffinfo';
// CombinedRecords
import type { AiDutyStatusRecordsApi } from '#/api/moxi/comprehensiveStaffinfo';
import {
    Card,
    Divider,
    message
} from 'ant-design-vue';
import { watchEffect, ref } from 'vue';
import bar from './bar.vue';
import Pie from './Pie.vue';
import descriptionsDetails from './descriptionsDetails.vue';




const getisShow = () => {
    isShow.value = !isShow.value;

};
const isShow = ref(true);

const open = ref<boolean>(false);
const offColumns = [
    {
        title: '序号',
        dataIndex: 'id',
    },
    {
        title: '员工姓名',
        dataIndex: ['employee', 'name'],
    },
    {
        title: '所属部门',
        dataIndex: ['employee', 'deptNames'],
    },
    {
        title: '离岗开始时间',
        dataIndex: 'startTime',
        customRender: ({ text }: { text: any }) => {
            if (!text) return '-';
            const date = new Date(text);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        }
    },
    {
        title: '离岗结束时间',
        dataIndex: 'endTime',
        customRender: ({ text }: { text: any }) => {
            if (!text) return '-';
            const date = new Date(text);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        }
    },
    {
        title: '离岗时长',
        dataIndex: 'duration',
        customRender: ({ text }: { text: any }) => {
            if (!text || text === 0) return '-';

            const hours = Math.floor(text / 60);
            const minutes = text % 60;

            if (hours == 0) {
                return `${minutes}分钟`;
            } else if (minutes == 0) {
                return `${hours}小时`;
            } else {
                return `${hours}小时${minutes}分钟`;
            }
        }
    }
];
const onColumns = [
    {
        title: '序号',
        dataIndex: 'id',
    },
    {
        title: '员工姓名',
        dataIndex: ['employee', 'name'],
    },
    {
        title: '所属部门',
        dataIndex: ['employee', 'deptNames'],
    },
    {
        title: '在岗开始时间',
        dataIndex: 'startTime',
        customRender: ({ text }: { text: any }) => {
            if (!text) return '-';
            const date = new Date(text);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        }
    },
    {
        title: '在岗结束时间',
        dataIndex: 'endTime',
        customRender: ({ text }: { text: any }) => {
            if (!text) return '-';
            const date = new Date(text);
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        }
    },
    {
        title: '在岗时长',
        dataIndex: 'duration',
        customRender: ({ text }: { text: any }) => {
            if (!text || text === 0) return '-';

            const hours = Math.floor(text / 60);
            const minutes = text % 60;

            if (hours == 0) {
                return `${minutes}分钟`;
            } else if (minutes == 0) {
                return `${hours}小时`;
            } else {
                return `${hours}小时${minutes}分钟`;
            }
        }
    },
    {
        title: '操作',
        dataIndex: 'operation',
        slots: { customRender: 'operation' }
    },
];
// 定义
const offData = ref<any[]>([]);
const onData = ref<any[]>([]);


// 定义 props
const props = defineProps<{
    formData?: object;
    searchDeptId?: number;
}>();
const handleFormData = async (formData: object) => {
    console.log('handleFormData:', formData);
    // 你的异步逻辑
    const params = {
        pageNo: 1,
        pageSize: 100,
        deptId: props.searchDeptId,
        userid: (formData as any).userid,
        ofDate: (formData as any).ofDate,
    };
    const resOffDuty = await getAiDutyStatusRecordsPage({ ...params, type: 2 });
    if (resOffDuty) {
        offData.value = resOffDuty.list;
    }
    const resOnDuty = await getAiDutyStatusRecordsPage({ ...params, type: 1 });
    if (resOnDuty) {
        onData.value = resOnDuty.list;
    }
    console.log('resOffDuty:', resOffDuty);
    console.log('resOnDuty:', resOnDuty);

};
watchEffect(() => {
    if (props.formData) {
        console.log('接收到的formData:1', props.formData);
        // 你的异步逻辑
        handleFormData(props.formData);
    }
});

const objData = ref<any>({});
const handleEdit = (record:any,) => {
    console.log('编辑:', record);
    objData.value = record;
    open.value = true;  // 打开抽屉
};
const onClose = () => {
  open.value = false;
};
</script>

<template>
    <Page>
        <div>
            <!-- 左侧：建立连接、发送消息 -->
            <Card size="small" v-show="isShow">
                <!-- <a-button @click="getisShow()">切换视图</a-button> -->
                <div class="mb-2 flex items-center rounded-lg p-3">
                    <div>
                        <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
                    </div>
                    <span class="mr-2 text-xl font-medium">离岗记录明细</span>
                </div>
                <a-table :columns="offColumns" :data-source="offData" bordered size="small">
                </a-table>

                <!-- <div class="mb-2 flex items-center rounded-lg p-3"> -->
                <div class="mb-2 flex items-center rounded-lg p-3">
                    <div>
                        <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
                    </div>
                    <span class="mr-2 text-xl font-medium">在岗信息明细</span>
                </div>
                <a-table size="small" :columns="onColumns" :data-source="onData" bordered>
                    <template #operation="{ record }">
                        <a-button type="link" size="small" @click="handleEdit(record)">
                            详情
                        </a-button>
                    </template>
                </a-table>
            </Card>
            <!-- <Card size="small" v-show="!isShow">
                <a-button @click="getisShow()">切换表格</a-button>
                <bar></bar>
                <Divider>
                    <span class="text-gray-500"></span>
                </Divider>
                <Pie></Pie>
            </Card> -->
        </div>
        <a-drawer :width="500" title="在岗轨迹" :open="open" @close="onClose">
            <descriptionsDetails :objData="objData"/>
        </a-drawer>
    </Page>
</template>
